import ConfirmModal from "./OpenConfirmModal";
import { action } from "@storybook/addon-actions";
import { expect, fn, userEvent, within } from "@storybook/test";
import type { Meta, StoryObj } from "@storybook/react";
import OpenConfirmModal from "./OpenConfirmModal";
export default {
  title: "COMPONENTS/ConfirmModal",
  component: ConfirmModal,
  tags: ["autodocs"],

  argTypes: {
    type: {
      options: ["success", "error", "warning", "info"],
      control: { type: "select" },
    },
    onConfirm: fn(),
  },
};

type Story = StoryObj<typeof OpenConfirmModal>;

export const WithTypeProps = {
  args: {
    type: "success",
  },
};

export const WithTextProps: Story = {
  args: {
    type: "success",
    text: "This is a success message",
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole("button");
    await userEvent.click(button);

    const modalElement = canvas.getByTestId("confirm-modal");
    const confirmModalElement = canvas.getByTestId("confirm-modal-confirm");
    expect(modalElement).not.toBeNull();
    expect(confirmModalElement).not.toBeNull();

    await userEvent.click(confirmModalElement);

    await userEvent.click(button);
    const cancelModalElement = canvas.getByTestId("confirm-modal-cancel");
    expect(cancelModalElement).not.toBeNull();
    await userEvent.click(cancelModalElement);
  },
};

export const WithOnConfirmEvent = {
  args: {
    onConfirm: action("confirmed"),
  },
};
